<template>
  <div class="detail-banner">
    <div class="center">
      <div class="banner-area">
        <span
          class="back-icon"
          @click="goBack"
        ></span>
        <div class="pic-container">
          <el-image
            :src="detailData.app_big_img ? detailData.app_big_img : DefaultBg"
            fit="cover"
          ></el-image>
        </div>
        <div class="bottom-title-container" ref="banner">
          <span
            class="app-icon"
            :style="{
              background: `url(${detailData.app_icon ? detailData.app_icon : DefaultAppIcon}) no-repeat center center / cover`
            }"
          ></span>
          <span class="more">
            <p class="app-title">{{ detailData.app_name ? detailData.app_name : '默认名称' }}</p>
            <p class="app-description">{{ detailData.introduce ? detailData.introduce : '默认简介'}}</p>
          </span>
          <span
            :class="`follow ${isFollowing ? 'following' : 'not-follow'}`"
            @click="handleUpdateFollow"
          >{{ isFollowing ? '已关注' : '关注' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { updateFollow, getIsFollowing } from '@/network/detail'
  import DefaultBg from './images/image-default-bg.jpg'
  import DefaultAppIcon from './images/icon-default-app.jpg'
  export default {
    components: { },
    name: 'DetailBanner',
    data () {
      return {
        DefaultBg,
        DefaultAppIcon,
        isFollowing: false,
        user_id: window.localStorage.getItem('user_id')
      }
    },
    props: {
      detailData: Object
    },
    created () {
      this.loadFollow()
    },
    mounted () {
      // this.$refs['banner'].addEventListener('scroll', () => console.log('111'))
    },
    methods: {
      // 后退跳转
      goBack () {
        this.$router.go(-1)
      },
      // 更新关注
      async handleUpdateFollow () {
        const { code, data } = await updateFollow({
          app_id: this.$route.params.id,
          user_id: this.user_id
        })
        if (code === 200) {
          if (data) {
            this.$message({
              type: 'success',
              message: '关注成功！'
            })
          } else {
            this.$message({
              type: 'success',
              message: '取关成功！'
            })
          }
          this.loadFollow()
        } else {
          this.$message({
            type: 'error',
            message: '操作失败！请联系管理员！'
          })
        }
      },
      // 刷新关注
      async loadFollow () {
        const { data, code } = await getIsFollowing({
          app_id: this.$route.params.id,
          user_id: this.user_id
        })
        if (code === 200) {
          this.isFollowing = data
        } else {
          this.$message({
            type: 'error',
            message: '操作失败！请联系管理员！'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-banner {
    display: flex;
    width: 600px;
    .center {
      position: relative;
      padding: 20px;
      width: 100%;
      .banner-area {
        position: relative;
        min-height: 300px;
        .back-icon {
          display: block;
          width: 36px;
          height: 36px;
          position: absolute;
          top: 30px;
          left: 30px;
          border-radius: 50%;
          background: rgba(0, 0, 0, .3) url(./images/arrow.svg) no-repeat center center / 24px 24px;
          transform: rotate(180deg);
          cursor: pointer;
          z-index: 10;
          &:hover {
            background: rgba(0, 0, 0, .55) url(./images/arrow.svg) no-repeat center center / 24px 24px;
          }
        }
        .pic-container {
          width: 100%;
          min-height: 300px;
        }
        .bottom-title-container {
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          width: 100%;
          height: 80px;
          padding: 10px;
          z-index: 1;
          backdrop-filter: blur(5px);
          background-color: rgba(0, 0, 0, .15);
          .app-icon {
            height: 60px;
            width: 60px;
            border-radius: 10px;
          }
          .more {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            height: 100%;
            padding-left: 14px;
            color: #fff;
            .app-title {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 16px;
            }
            .app-description {
              font-size: 14px;
            }
          }
          .follow {
            position: relative;
            display: block;
            width: 64px;
            height: 50px;
            padding: 30px 10px 0 10px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            border-left: 1px solid rgba(255, 255, 255, .3);
            &.following {
              color: #FFAAEE;
              &::before {
                position: absolute;
                left: 19px;
                top: 5px;
                display: block;
                width: 24px;
                height: 24px;
                background: url(./images/icon-followed.svg) center center / 24px 24px no-repeat;
                content: "";
              }
            }
            &.not-follow {
              &::before {
                position: absolute;
                left: 19px;
                top: 5px;
                display: block;
                width: 24px;
                height: 24px;
                background: url(./images/icon-not-follow.svg) center center / 24px 24px no-repeat;
                content: "";
              }
            }
          }
        }
      }
    }
  }
</style>
